

const template = document.createElement('template');

template.innerHTML = `
  <style>
    p{
        font-weight: bold;
    }
  </style>
  <div class="container">
    <p class="content">2020/11/30 上午10:50:09</p>
  </div>
`;

class Time extends HTMLElement {
    constructor() {
        super();
        this._shadowRoot = this.attachShadow({ mode: 'open' });
        this._shadowRoot.appendChild(template.content.cloneNode(true));

        this.$container = this._shadowRoot.querySelector('.container');
        this.$content = this._shadowRoot.querySelector(".content");

        this.timer = setInterval(() => {
            this.label = new Date().toLocaleString();
        }, 1000);

    }


    get label() {
        return this.getAttribute('label');
    }

    set label(value) {
        this.setAttribute('label', value);
        this.render();
    }

    static get observedAttributes() {
        return ['label'];
    }

    render() {
        this.$content.innerHTML = this.label;
    }

}

window.customElements.define("x-time", Time);
